<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>   
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
	<style>
		body{
			font-size:14px;
		}
		table.altrowstable {
	    qont-family: verdana,arial,sans-serif;
		    border-width: 1px;
		    border-color: #a9c6c9;
		    border-collapse: collapse;
		    width: 500px;
		    height: 50px;
		    text-align:center;
		   
		}
		table.altrowstable th {
		    border-width: 1px;
		    padding: 8px;
		    border-style: solid;
		    border-color: #a9c6c9;
		}
		table.altrowstable td {
		    border-width: 1px;
		    padding: 8px;
		    border-style: solid;
		    border-color: #131a1b;
		}
		.input{
			background-color: transparent;
			border-width:0.5;
			text-align: center;
		}
		.td1 {
			width: 500px;
		}
		.oddrowcolor{
		    background-color:#d4e3e5;
		}
		.evenrowcolor{
		    background-color:#c3dde0;
		}
	</style>
</head>
<body>
	<form action="">
		<input type="hidden" id="userId" value="${manager.iUserId}"/>
		<div align="center">
			<table class="altrowstable" id="alternatecolor">
				<tr><td>用户名</td><td><input type="text" class="input" id="userName" name="sUserName" onkeyup="value=value.replace(/[/W]/g,'') "
					 onchange="doChange()" /></td><td id="td1" style="border:none;"></td></tr>
				<tr><td>姓名</td><td><input type="text" class="input" id="name" name="sName" /></td></tr>
				<tr><td>性别</td><td><input type="radio" name="sex" value="2" id="sex" checked="checked"/>男 <input type="radio" name="sex" value="3" />女</td></tr>
				<tr><td>年龄</td><td>
					<select id="age" style="width: 70px; text-align: center;">
						<option value="" selected="selected">无</option>
						<c:forEach var="item" begin="18" end="60">
							<option value="${item}" >${item}</option>
					</c:forEach>
					</select>
				</td></tr>
				<tr><td>身份证</td><td><input type="text" maxlength="18" class="input" id="idCard" name="sIdCard" onkeyup="value=value.replace(/^[a-zA-Z]+\D*|^\d{0,16}[a-zA-Z]+|[^0-9Xx]/g,'')"/></td></tr>
				<tr><td>民族</td><td>
					<select id="nation" style="width: 100px; text-align: center;">
						<option value="" selected="selected">请选择民族</option>
						<c:forEach items="${nation}" var="item">
							<option value="${item.sNation}">${item.sNation}</option>
						</c:forEach>
					</select>
				</td></tr>
				<tr><td>电话</td><td><input type="text" maxlength="11" class="input" id="tel" name="sTel" onkeyup="value=value.replace(/[^(\d)]/g,'')"/></td></tr>
				<tr><td>住址</td><td>
					<select id="province" style="width: 100px; text-align: center;" onchange="getCity()">
						<option value="" selected="selected">请选择省</option>
						<c:forEach items="${province}" var="item">
							<option value="${item.iProvinceId}">${item.sProvinceName}</option>
						</c:forEach>
					</select>
					<select id="city" style="width: 100px; text-align: center;" >
						<option value="" selected="selected">请选择市</option>
					</select>
				</td></tr>
				<tr>
					<td colspan="2"><input type="checkbox" id="roleId" name="iRoleIds" value="1" />客房管理
					<input type="checkbox" id="roleId" name="iRoleIds" value="2" />大堂经理
					<input type="checkbox" id="roleId" name="iRoleIds" value="3" />管理员</td>
				</tr>
					<tr><td colspan="2"><input type="button" value="增加" onclick="doInsert()"/></td></tr>
			</table>
		</div>
	</form>
</body>
	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<script type="text/javascript">
	var flag = false;
	function doInsert(){
		if("" == $("#userName").val()){
			alert("请输入用户名");
			return false;
		}
		if(""==$("#name").val()||$("#name").val().match(/[^\u4e00-\u9fa5]/)){
			alert("请输入姓名");
			return false;
		}
		if("" == $("#age").val()){
			alert("请选择年龄");
			return false;
		}
		if(18 != $("#idCard").val().length||!$("#idCard").val().match(/^\w+$/)){
			alert("请输入身份证号");
			return false;
		}
		if("" == $("#nation").val()){
			alert("请选择年龄");
			return false;
		}
		if(11 != $("#tel").val().length){
			alert("请输入正确的手机号码");
			return false;
		}
		if("" == $("#city").val()){
			alert("请输入地址");
			return false;
		}
		if(0==$("#roleId:checked").length){
			alert("请选择职位");
			return false;
		}
		var str = "manager/insert.action?sUserName=" + $("#userName").val()+"&sName=" + $("#name").val()+"&sSex="+$("#sex:checked").val()+"&iAge="+$("#age").val()+
			"&sTel="+$("#tel").val()+"&sIdCard="+$("#idCard").val()+"&sNation="+$("#nation").val()+"&sAddress="+$("#province").find("option:checked").text()+$("#city").find("option:checked").text();
		for(var i=0;i<$("#roleId:checked").length;i++){
			str+="&iRoleIds="+$("#roleId:checked").eq(i).val();
		}
		window.location=str;
	}
	

	function doChange() {
		$.ajax({
			// 请求的地址
			url : "manager/passwordUpdate.action",
			// 是否是异步。
			async : false,
			// 回执的数据类型，默认为普通字符串
			dataType : "json",
			// 请求的数据
			data : {"sUserName":$("#userName").val()},	
			// 请求后的回调方法。{"status":?,"msg":?}
			success : function(result) {
				console.log(result);
				if (result["status"] == 2) {
					$("#td1").text(result["msg"]);
					flag = false;
				} else if (result["status"] == 1) {
					$("#td1").text(result["msg"]);
					flag = true;
				}
			},
			type : "POST"
		});
	}
	function getCity() {
		var str = "<option value='' selected='selected'>请选择市</option>";
		$.ajax({
			// 请求的地址
			url : "manager/passwordUpdate.action",
			// 是否是异步。
			async : false,
			// 回执的数据类型，默认为普通字符串
			dataType : "json",
			// 请求的数据
			data : {"sMethod":"getCity","iProvinceId":$("#province").val()},	
			// 请求后的回调方法。{"status":?,"msg":?}
			success : function(result) {
				console.log(result);
				//var json=result["json"];
				for(var i=0;i<result.length;i++){
					str += "<option value='"+result[i]["iProvinceId"]+"'>" +result[i]["sCityName"]+ "</option>";
				}
				$("#city").html(str);
			},
			type : "POST"
		});
	}
	</script>
</html>